<template>
  <div v-if="styleType === 'list'">
    <div v-for="(item, key) in list" :key="key" class="m10px p10px" :style="cardStyle" style="background-size: 100% 100%">
      <div class="w-full flex justify-between items-center">
        <div class="flex items-center">
          <div class="m-r-4">
            <img v-if="item.image" :src="item.image" alt="" class="size-40px" />
            <van-image v-else :src="defaultImage" alt="" class="size-40px" />
          </div>
          <div>
            <div class="text-16px">{{ item.name }}</div>
            <div v-if="item.desc" class="text-12px color-gray">{{ item.desc }}</div>
          </div>
        </div>
        <div class="flex justify-between items-center">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
  <div v-else class="dk-app-gold-grid">
    <van-grid v-if="list?.length > 0" :border="false" :column-num="columnNum" class="min-h-30px dk-app-gold-grid">
      <van-grid-item v-for="(item, key) in list" :key="key">
        <img
          v-if="item.image"
          :src="item.image"
          alt=""
          :style="
            useImageStyle
              ? imageStyle
              : {
                  width: '40px',
                  height: '40px',
                  marginBottom: '10px',
                  borderRadius: '10px'
                }
          "
        />
        <van-image
          v-else
          :src="defaultImage"
          alt=""
          :style="
            useImageStyle
              ? imageStyle
              : {
                  width: '40px',
                  height: '40px',
                  marginBottom: '10px',
                  borderRadius: '10px'
                }
          "
        />
        <span>{{ item.name }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getCategoryList } from '@/api/category.js'

export default {
  name: 'DkAppCategoryList',
  props: {
    defaultImage: { type: String, default: '' },
    columnNum: {
      type: Number,
      default: 4
    },
    imageStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    useImageStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    project: { type: String, default: 'question' },
    styleType: {
      type: String,
      default: 'list'
    },
    cardStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {},
  watch: {
    project: {
      handler(val) {
        getCategoryList(1, 5, val).then((res) => {
          this.list = res.data.list
        })
      },
      immediate: true
    }
  },
  mounted() {
    getCategoryList(1, 5, this.project).then((res) => {
      this.list = res.data.list
    })
  }
}
</script>

<style scoped lang="scss">
.dk-app-gold-grid {
  &:deep {
    .van-grid-item__content {
      background: none;
    }
  }
}
</style>
